* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
    font: 1.0em Arial, sans-serif;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.03, rgb(150,150,150)),
        color-stop(1, rgb(208,217,217))
    );
    background-color: rgb(150,150,150);
    background-repeat: no-repeat;
}

.body {
    width: 1010px;
    height: 670px;
    margin: auto auto;
}

#view {
    border: 1px solid black;
    width: 830px;
    height: 630px;
    float: left;
    background: white;
    border-radius: 0 4px 4px 4px;
    overflow: hidden;
}

#viewmap {
    border: 1px solid black;
    width: 800px;
    height: 600px;
    float: left;
}

.canvas-container {
    height: 0;
}

#v-scroll-container {
    width: 2000px;
}

#v-scroll {
    width: 600px;
    -webkit-transform: rotate(90deg) translate(290px,287px);
}

#h-scroll {
    clear: both;
    width: 800px;
    margin-left: 1px;
    margin-top: 3px;
    float: left;
}

#view-resize {
    float: left;
    width: 20px;
    height: 20px;
    margin: 3px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    margin-left: 4px;
    border-radius: 16px;
}

#view-resize div {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    margin: 3px;
    border-radius: 16px;
    width: 14px;
    height: 14px;
    overflow: hidden;
}

#view-resize div div {
    width: 8px;
    height: 8px;
}

#tool-modes {
    border: 1px solid black;
    border-radius: 4px;
    width: 155px;
    height: 42px;
    padding: 5px;
    background: white;
    float: left;
    margin-left: 5px;
    margin-bottom: 5px;
}

#tool-modes span {
    width: 39px;
    height: 31px;
    display: block;
    float: left;
    margin: 5px;
    border: 2px solid #aaa;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center center;
}

#tool-modes span:last-child {
    margin-right: 0;
}

#tool-mode-add {
    background-image: url(mode-add.png);
}

#tool-mode-edit {
    background-image: url(mode-edit.png);
}

#tool-mode-delete {
    background-image: url(mode-delete.png);
}

#tool-modes span.selected {
    border-color: black;
}

#palette {
    float: left;
    margin-left: 5px;
    width: 165px;
    height: 571px;
    border: 1px solid black;
    background: white;
    border-radius: 4px;
}

.clear {
    clear: both;
}

#menu li {
    width: 152px;
    height: 20px;
    padding: 5px;
    margin: 2px;
    border: 1px solid black;
    border-radius: 5px;
    list-style: none;
    float: left;
    cursor: default;
    background: #fafafa;
}

#menu li:first-child {
    margin-left: 0;
}

#menu .disabled {
    border-color: #555;
    background: #eee;
    color: #777;
}

#palette span {
    display: block;
    background: #eee;
    font-size: 1.1em;
    border: 1px solid #777;
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

#palette span + input {
    display: none;
}

#palette input + span {
    border: none;
    background: none;
    height: 475px;
    width: 165px;
    display: none;
}

#palette input:checked + span {
    display: block;
}

#bottom-panel {
    background: white;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 3px;
    width: 996px;
    margin-top: 5px;
}

#bottom-panel label input {
    display: none;
}

#bottom-panel label input + span {
    border: 1px solid #555;
    border-radius: 4px;
    color: silver;
    background: #eee;
    width: 20px;
    text-align: center;
    display: inline-block;
}

#bottom-panel label input:checked + span {
    border-color: black;
    color: black;
    background: white;
}

#palette img {
    display: block;
    float: left;
    margin: 5px;
    padding: 5px;
    border: 2px solid #aaa;
    border-radius: 4px;
}

#palette img.selected {
    border-color: black;
    background: #e9e9e9;
}
